<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="./index.css" />
</head>

<body>
  <section id="wrap">
    <h2 class="title">百度音乐榜单</h2>
    <ul id="list">
    </ul>
    <footer class="footer">
      <label><input type="checkbox" id="checkAll" />全选/全不选</label>
      <a href="javascript:;" id="remove">删除</a>
      <input type="text" id="newInfo" placeholder/>
      <a href="javascript:;" id="add">添加</a>
    </footer>
  </section>
  <script>
      var dataArr = [
        {
          id: 0,
          title: "残酷月光 - 费启鸣",
          checked: true,
          collect: true
        }, {
          id: 1,
          title: "兄弟 - 艾热",
          checked: false,
          collect: false
        }, {
          id: 2,
          title: "毕生 - 夏增祥",
          checked: false,
          collect: true
        }, {
          id: 3,
          title: "公子向北去 - 李春花",
          checked: false,
          collect: false
        }, {
          id: 4,
          title: "战场 - 沙漠五子",
          checked: true,
          collect: false //是否收藏 true 收藏 false 没有收藏
        }
      ];
        // 1.按照数据渲染 音乐列表 2.全选 全不选 ：注意联动  3.删除 ：（删除每一项 、删除选中的音乐）4.添加功能
        // 5.收藏和取消收藏功能
        // 先修改数据在渲染视图；
      renderDom( dataArr ) ; 
      function renderDom(  ){
        var ulEle = document.getElementById("list");
        ulEle.innerHTML = '' ;
        dataArr.forEach(function( item , key ){
            var liEle = document.createElement("li");
            if( item.checked ){
              var inputCheck =  `<input type="checkbox" checked />`;
            } else {
              var inputCheck =  `<input type="checkbox"/>`;
            }
            if ( item.collect ){
              var collectStr = `<a href="javascript:;" class="collect">取消收藏</a>` ; 
            } else {
              var collectStr = `<a href="javascript:;" class="collect">收藏</a>` ; 
            }
            liEle.innerHTML = ` ${inputCheck}
                                <span>${item.title}</span>
                                <div>
                                  ${collectStr}
                                  <a href="javascript:;" class="remove">删除</a>
                                </div>`
            ulEle.appendChild(liEle);
        });
        addMusic () ; 
        delMusic () ;
        checkAll () ;
      }

      function addMusic (){
        var addBtn = document.getElementById("add");
        var musicInfo = document.getElementById("newInfo");
        addBtn.onclick = function (){
          var obj = {};
          obj.id = dataArr.length ; 
          obj.title =`${musicInfo.value} `;
          obj.checked = false ; 
          obj.collect = false ; 
          dataArr.push(obj);
          renderDom( dataArr ) ; 
        }
      }

      // 删除        /       收藏        /           勾选
      function delMusic (){
        var removeMusics = document.querySelectorAll(".remove");
        var collectMusic = document.querySelectorAll(".collect");
        var checkMusic = document.querySelectorAll("li input");
        removeMusics.forEach(function(removeMusic,key){
          removeMusic.onclick = function (){
            dataArr.splice(key,1);
            renderDom( dataArr ) ; 
          }
          collectMusic[key].onclick = function (){
            dataArr[key].collect = !dataArr[key].collect ;
            renderDom( dataArr ) ;  
          }
          checkMusic[key].onclick = function (){
            dataArr[key].checked = !dataArr[key].checked ;
            var res = dataArr.every(function(item){
              return item.checked;
            });
            document.getElementById("checkAll").checked = res ; 
            renderDom( dataArr ) ;  
          }
        });
      }

      //  全选       与      选中删除
      function checkAll () {
        var checkAll = document.getElementById("checkAll"); 
        checkAll.onclick = function(){
          var flag = checkAll.checked ; 
          dataArr.forEach(function(item){
            item.checked = flag ; 
          });
          renderDom( dataArr ) ; 
        }
        var removeAll = document.getElementById("remove");
        // console.log(removeAll);
        removeAll.onclick = function (){
          var newArr = dataArr.filter(function(item){
            return item.checked == false ; 
          });
          if ( newArr.length == 0 ){
            checkAll.checked = false ;
          }
          dataArr = newArr ; 
          renderDom( dataArr ) ; 
        }
      }
  </script>
</body>

</html>